<template>
  <el-drawer
    :title="title"
    :visible.sync="drawer"
    show-close
    size="50%"
    class="drawer"
    :before-close="dialogBeforeClose"
  >
    <div class="container">
      <el-form ref="form" :model="formData" :rules="rules">
        <div class="" style="height: 100%">
          <div class="overflowX">
            <el-row :gutter="10" class="">
              <el-col :span="12" style="padding-right: 10px">
                <el-form-item label="小区名称" prop="community_code">
                  <el-select
                    v-model="formData.community_code"
                    placeholder="请输入"
                    clearable
                    size="small"
                    :style="{ width: '100%' }"
                  >
                    <el-option
                      v-for="item in list"
                      :key="item.id"
                      :label="item.name"
                      :value="item.code"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12" style="padding-right: 10px">
                <el-form-item label="设备名称" prop="name">
                  <el-input
                    v-model="formData.name"
                    size="small"
                    placeholder="请输入"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12" style="padding-right: 10px">
                <el-form-item label="品牌" prop="brand">
                  <el-input
                    v-model="formData.brand"
                    size="small"
                    placeholder="请输入"
                    clearable
                    class="input"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12" style="padding-right: 10px">
                <el-form-item label="价格" prop="price">
                  <el-input-number
                    v-model="formData.price"
                    controls-position="right"
                    size="small"
                    :min="1"
                    :style="{ width: '100%' }"
                    @blur="priceShow = true"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12" style="padding-right: 10px">
                <el-form-item label="购买数量" prop="quantity">
                  <el-input-number
                    v-model="formData.quantity"
                    controls-position="right"
                    size="small"
                    :min="1"
                    :style="{ width: '100%' }"
                    @blur="priceShow = true"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12" style="padding-right: 10px">
                <el-form-item label="购买时间" prop="buy_time">
                  <el-date-picker
                    v-model="formData.buy_time"
                    type="date"
                    placeholder="选择日期"
                    size="small"
                    :style="{ width: '100%' }"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12" style="padding-right: 10px">
                <el-form-item label="预计使用年限" prop="durable_years">
                  <el-input
                    v-model.number="formData.durable_years"
                    size="small"
                    placeholder="请输入"
                    clearable
                    class="input"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12" style="padding-right: 10px">
                <el-form-item label="备注" prop="">
                  <el-input
                    v-model="formData.remark"
                    type="textarea"
                    :rows="4"
                    size="small"
                    placeholder="请输入内容"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24" style="padding-right: 10px">
                <el-form-item label="设备图片">
                  <u-pload
                    ref="refPload"
                    :style="{ width: '100%' }"
                    :imges-all="formData.photo"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
        <el-row type="flex" justify="end" class="btn">
          <el-button size="small" @click="dialogBeforeClose">取消</el-button>
          <el-button
            type="primary"
            size="small"
            @click="postComponents"
          >确定</el-button>
        </el-row>
      </el-form>
    </div>
  </el-drawer>
</template>

<script>
import UPload from '../index/UPload.vue'
import { postComponents, PUTComponents } from '@/api/device/device'
export default {
  components: { UPload },
  data() {
    return {
      // 抽屉
      drawer: false,
      // 下拉框数据
      list: [],
      formData: {
        community_code: '',
        name: '',
        brand: '',
        price: '',
        quantity: '',
        buy_time: '',
        durable_years: null,
        remark: '',
        photo: ''
      },
      //   时间
      // 价格点击
      priceShow: true,
      rules: {
        community_code: [
          {
            required: true,
            message: '请选择小区名称',
            trigger: 'change'
          }
        ],
        name: [
          {
            required: true,
            message: '请输入设备名称',
            trigger: 'blur'
          }
        ],
        brand: [
          {
            required: true,
            message: '请输入品牌',
            trigger: 'blur'
          }
        ],
        price: [
          {
            required: true,
            message: '请输入价格',
            trigger: 'blur'
          }
        ],
        quantity: [
          {
            required: true,
            message: '请输入购买数量',
            trigger: 'blur'
          }
        ],
        buy_time: [
          {
            required: true,
            message: '请选择购买时间',
            trigger: 'change'
          }
        ],
        durable_years: [
          {
            required: true,
            message: '请输入预计使用年限',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    title() {
      return this.formData.id ? '修改资产设备信息' : '新增资产设备信息'
    }
  },
  methods: {
    // 确定
    // 处理图片上传
    async postComponents() {
      // 判断上传的图片是否上传成功
      if (this.$refs.refPload.showPercent) return this.$message.warning('您当前还有图片没有上传完成！')
      // 图片数组字符化
      this.formData.photo = this.$refs.refPload.fileList.map((item) => item.response ? item.response.url.split('8881')[1] : item.url.split('8881')[1]).toString()
      //   时间处理
      this.formData.buy_time = +new Date(this.formData.buy_time)
      // 校验
      await this.$refs.form.validate()
      // 新增或编辑
      this.formData.id ? await PUTComponents(this.formData) : await postComponents(this.formData)
      this.$message.success('操作成功')
      // 关闭并清空数据
      this.dialogBeforeClose()
      // 刷新页面
      this.$parent.getComponents()
    },
    // 清除数据
    dialogBeforeClose() {
      this.drawer = false
      this.$refs.form.resetFields()
      this.$refs.refPload.fileList = []
      this.formData = {
        community_code: '',
        name: '',
        brand: '',
        price: '',
        quantity: '',
        buy_time: '',
        durable_years: null,
        remark: '',
        photo: ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  display: flex;
  align-items: center;
  h3 {
    font-size: 20px;
    color: rgba(0, 0, 0, 0.88);
    padding-right: 10px;
  }
}
::v-deep.drawer {
  .el-drawer__header {
    padding-bottom: 10px;
    margin: 0;
    font-size: 25px;
    border-bottom: 1px solid #f0f0f0;
  }
  // .el-drawer__title {
  //   padding-top: 58px;
  // }
  .el-drawer__body {
    flex: 1 1;
    min-width: 0;
    min-height: 0;
    /* overflow: auto; */
  }
}
.container {
  padding: 0 20px;
  height: 100%;
  .el-form {
    position: relative;
    height: 100%;
    padding-bottom: 80px;
    .overflowX {
      height: 100%;
      overflow-x: hidden;
      // overflow: scroll;
    }
  }
}
.btn {
  border-top: 1px solid #f0f0f0;
  padding: 20px 10px;
}
.el-form-item {
  margin-bottom: 10px;
}
::v-deep .el-input {
  .el-input__inner {
    text-align: left;
  }
  .el-upload--picture-card {
    width: 100px;
  }
}
</style>
